<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 一定要先引入vue再引入vue-router -->
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <!-- router-link是VR自带的标签，会被默认渲染为a标签 -->
        <!-- 省略了锚点前面的# -->
        <router-link to="/user/1">user1</router-link>
        <router-link to="/user/2">user2</router-link>
        <router-link to="/user/3">user3</router-link>
        <router-link to="/user/4">user4</router-link>
        <router-link to="/register">register</router-link>
        <!-- 路由占位符，通过路由规则匹配到的组件展示的位置 -->
        <router-view></router-view>
    </div>
    <script>
        // 创建子组件
        // var User1 = {
        //     template: '<h1>user1</h1>'
        // };
        // $route.params对象可以访问到动态路由绑定的值
        var User = {
            props: ['uid'],
            template: '<h1>{{uid}}</h1>'
        }

        const Register = {
            template: '<h1>register</h1>'
        };
        // 配置路由规则!!!!!!!!!!
        const router = new VueRouter({
            routes: [{
                path: '/',
                // 路由重定向
                redirect: "/User"
            }, {
                path: "/user/:uid",
                component: User,
                props: true
                    // props也可以是一个对象
                    // props:{uname:'lisi',age:12}
                    // props也可以是个函数
                    // props:route=>({uname:'aa',age:12,id:route.params.id})
            }, {
                path: "/register",
                component: Register

            }]
        });
        const vm = new Vue({
            el: '#app',
            // 挂载实例对象
            router: router
        })
    </script>
</body>

</html>